<script setup lang="ts">
const emit = defineEmits(['close'])
const active = ref(false)
const open = () => {
  active.value = true
}
const close = () => {
  active.value = false
  emit('close')
}

const router = useRouter()
const handGo = (path: string) => {
  router.push({
    path
  })
  close()
}
const updateChange = (e: boolean) => {
  if (!e) {
    emit('close')
  }
}
defineExpose({
  open,
  close
})
</script>

<template>
  <n-drawer
    :zIndex="999"
    width="200"
    v-model:show="active"
    placement="right"
    @update:show="updateChange"
  >
    <n-drawer-content body-content-class="menu-drawer-content" title=" ">
      <div class="list">
        <div class="item" @click="handGo('/')">首页</div>
        <div class="item" @click="handGo('/classify')">分类</div>
        <div class="item" @click="handGo('/user')">角色</div>
        <div class="item" @click="handGo('/tag')">标签</div>
        <div class="item" @click="handGo('/selected')">精选</div>
        <div class="item" @click="handGo('/toDay')">今日更新</div>
      </div>
    </n-drawer-content>
  </n-drawer>
</template>

<style lang="scss">
.menu-drawer-content {
  padding: 20px 10px 0 10px !important;
  .list {
    .item {
      font-size: 14px;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      text-align: center;
    }
  }
}
</style>
